<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="margin-xs account-box p-20 bg-blue">
        <div class="fl-sta-cen padding-bottom-xs account-header">
          <el-icon><Plus /></el-icon>
          <span class="padding-left-xs">放款账号</span>
        </div>
        <div class="fl-sta-cen account-item">
          <div class="label">账号:</div>
          <div class="value">
            {{ info.recvAcctNo }}
          </div>
        </div>
        <div class="fl-sta-cen account-item">
          <div class="label">开户行:</div>
          <div class="value">南京银行股份有限公司</div>
        </div>
        <div class="fl-sta-cen account-item">
          <div class="label">开户名:</div>
          <div class="value">
            {{ info.companyName }}
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="margin-xs account-box p-20 bg-orange">
        <div class="fl-sta-cen padding-bottom-xs account-header">
          <i class="el-icon-postcard icon"></i>
          <el-icon class="el-icon-postcard icon"><Plus /></el-icon>
          <span class="padding-left-xs">融资还款账号</span>
        </div>
        <div class="fl-sta-cen account-item">
          <div class="label">账号:</div>
          <div class="value">
            {{ info.repayAcctNo }}
          </div>
        </div>
        <div class="fl-sta-cen account-item">
          <div class="label">开户行:</div>
          <div class="value">南京银行股份有限公司</div>
        </div>
        <div class="fl-sta-cen account-item">
          <div class="label">开户名:</div>
          <div class="value">
            {{ info.companyName }}
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
interface AccountInfo {
  recvAcctNo?: string
  repayAcctNo?: string
  companyName?: string
  // 可以添加更多需要的属性
}

const props = defineProps<{
  info: AccountInfo
}>()
</script>

<style lang="scss" scoped>
.fl-sta-cen {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.account-box {
  border-radius: 10px;

  .account-header {
    font-size: 16px;

    .icon {
      font-size: 26px;
    }
  }

  .account-item {
    padding-top: 4px;

    .label {
      width: 50px;
      color: #909399;
    }

    .value {
      font-size: 14px;
      color: #333;
    }
  }
}

.bg-blue {
  background: #f0f8ff;

  .account-header {
    color: #4682f3;
  }
}

.bg-orange {
  background: #fff9e9;

  .account-header {
    color: #ff800f;
  }
}
</style>
